<template>
    <div class="editor-container">
        <el-form ref="filmFormRef" :model="AddForm" label-width="80px">
            <el-form-item label="电影海报">
                <el-upload class="avatar-uploader" v-model="AddForm.movieposter" :before-upload="handleBeforeUpload"
                    :http-request="uploadEnter">
                    <img v-if="AddForm.movieposter" :src="AddForm.movieposter" class="avatar" />
                    <span v-if="!AddForm.movieposter" class="addplus">+</span>
                </el-upload>
            </el-form-item>
            <!-- <el-form-item label="影片类型">
                <el-select placeholder="请选择影片类型" v-model="AddForm.type">
                    <el-option v-for="item in filmtypes" :label="item.name" :value="item.name" :key="item.code">
                    </el-option>
                </el-select>
            </el-form-item> -->
            <el-form-item label="主演名单">
                <el-input v-model="AddForm.actornames"></el-input>
            </el-form-item>
            <el-form-item label="电影简介">
                <el-input v-model="AddForm.filmintroduction" type="textarea"></el-input>
            </el-form-item>
            <el-form-item label="电影名字">
                <el-input v-model="AddForm.name"></el-input>
            </el-form-item>
            <el-form-item label="电影类型">
                <el-checkbox-group v-model="AddForm.movietypes" :max="3">
                    <el-checkbox v-for="item in movietypes2" :label="item.type" name="type">{{
                        item.type }}</el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="电影评分">
                <el-rate v-model="AddForm.rating" :max="10" allow-half />
            </el-form-item>
            <el-form-item label="上映时间">
                <el-date-picker v-model="AddForm.releaseTime" type="date" placeholder="请输入上映日期" format="YYYY/MM/DD" />
            </el-form-item>
            <el-form-item label="制片方">
                <el-select placeholder="请选择国家类型" v-model="AddForm.producer">
                    <el-option v-for="item in producers" :label="item.area" :value="item.area" :key="item.code">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="时长">
                <el-input v-model="AddForm.duration"></el-input>
            </el-form-item>
            <el-form-item label="内容">
                <div id="editor-box"></div>
            </el-form-item>
            <div class="bottom">
                <el-button type="primary" @click="filmDialogEnter"> 创建 </el-button>
            </div>
        </el-form>

    </div>
    <div class="box"></div>
</template>
    
<script setup>
import E from "wangeditor";
import { onMounted, ref } from "vue";
import { richtext } from "@/api/sys.js"
import { clientFn } from '../OSS/index'
import { addfilminfo, searchfilmname, delfilm, findfilminfo, updatefilminfo } from "@/api/sys";
import { ElNotification } from "element-plus";
// Editor实例
let editor;
// 处理离开页面切换语言导致 dom 无法被获取
let el;
onMounted(() => {
    el = document.querySelector("#editor-box");
    initEditor();
});

const initEditor = () => {
    editor = new E(el);
    editor.config.zIndex = 1;
    // 菜单栏提示
    editor.config.showMenuTooltips = true;
    editor.config.menuTooltipPosition = "down";
    editor.create();
};

const AddForm = ref({
    movieposter: "",
    type: "资讯",
    actornames: "",
    filmintroduction: "",
    name: "",
    movietypes: ['动作', '喜剧'],
    rating: 10,
    releaseTime: "",
    producer: "",
    duration: "",
    demo: ""
});
const filmDialogEnter = () => {
    let time1 = AddForm.value.releaseTime;
    console.log(time1);
    let datetime1 = time1.getFullYear() + '-' + time1.getMonth() + '-' + time1.getDate()
    let fulltime = datetime1
    AddForm.value.releaseTime = fulltime;
    let demo = editor.txt.html()
    AddForm.value.demo = demo

    addfilminfo(AddForm.value).then((res) => {
        console.log("res添加成功电影数据", res);
        ElNotification({
            title: "Success",
            message: "添加电影信息成功",
            type: "success",
        });
        AddForm.value.movieposter = "";
        AddForm.value.actornames = "";
        AddForm.value.filmintroduction = "";
        AddForm.value.producer = "";
        AddForm.value.releaseTime = "";
        AddForm.value.rating = "";
        AddForm.value.movietypes = "";
        AddForm.value.demo = ""
    });
};
// 影片类型
const movietypes2 = ref([
    { typename: "action", type: "动作", checked: false },
    { typename: "comedy", type: "喜剧", checked: false },
    { typename: "drama", type: "剧情", checked: false },
    { typename: "children", type: "儿童", checked: false },
    { typename: "young", type: "校园青春 ", checked: false },
    { typename: "romance", type: "爱情", checked: false },
    { typename: "science", type: "科幻", checked: false },
    { typename: "fantasy", type: "奇幻", checked: false },
    { typename: "horror", type: "恐怖", checked: false },
    { typename: "thriller", type: "惊悚", checked: false },
    { typename: "crime", type: "犯罪", checked: false },
    { typename: "historical", type: "历史", checked: false },
    { typename: "animation", type: "动画 ", checked: false },
    { typename: "musical", type: "音乐歌舞", checked: false },
])

const producers = ref([
    { code: "1", area: "欧美" },
    { code: "2", area: "中国" },
    { code: "3", area: "俄罗斯" },
    { code: "4", area: "法国" },
    { code: "5", area: "德国" },
    { code: "6", area: "印度" },
    { code: "7", area: "意大利" },
    { code: "8", area: "澳大利亚" },
    { code: "9", area: "南美" },
    { code: "10", area: "美国" },
])
const filmtypes = ref([
    {
        name: "正在热映",
        code: "001",
    },
    {
        name: "即将上映",
        code: "002",
    },
    {
        name: "影院下线",
        code: "003",
    },
]);
// 类型选择查找
// const filmtypes2 = ref([
//     {
//         name: "正在热映",
//         code: "001",
//     },
//     {
//         name: "即将上映",
//         code: "002",
//     },
//     {
//         name: "影院下线",
//         code: "003",
//     },
//     {
//         name: "全部",
//         code: "004",
//     },
// ]);
// const selectType = (type) => {
//     queryInfo.value.type = type
//     findfilminfo(queryInfo.value).then((res) => {
//         FilmList.value = res.list;
//         queryInfo.value.total = res.total
//     });
// }

const handleBeforeUpload = (file) => {
    //上传之前的校验函数
    const isJPEG = file.name.split(".")[1] === "jpeg";
    const isJPG = file.name.split(".")[1] === "jpg";
    const isPNG = file.name.split(".")[1] === "png";
    const isWEBP = file.name.split(".")[1] === "webp";
    const isGIF = file.name.split(".")[1] === "gif";
    const isLt500K = file.size / 1024 / 1024 / 1024 / 1024 < 4;
    if (!isJPG && !isJPEG && !isPNG && !isWEBP && !isGIF) {
        alert('图片格式不对 ')
        return
    }
    if (!isLt500K) {
        alert('图片过大')
        return
    }
    return (isJPEG || isJPG || isPNG || isWEBP || isGIF) && isLt500K;
};
const uploadEnter = (file) => {
    //校验成功后开始上传 会走这个函数
    var fileName = 'abcimg/' + "banner" + `${Date.parse(new Date())}` + '.jpg'//文件名字
    clientFn()
        .multipartUpload(fileName, file.file, { // 1 文件名字  2 文件本身 3 进度条
            progress: function (percentage, cpt) {
                // console.log('进度图片上传', percentage)
            }
        }).then((res) => {
            // console.log('res上传成功')
            // console.log(res)
            AddForm.value.movieposter = 'https://rantoki.oss-cn-beijing.aliyuncs.com/' + fileName
        })
};
// 添加新电影

const onSubmitClick = () => {
    let demo = editor.txt.html()
    richtext(demo).then((res) => {

    })
    document.querySelector(".box").innerHTML = editor.txt.html()
}


</script>
    
<style lang="scss" scoped>
.editor-container {
    .bottom {
        margin-top: 20px;
        text-align: right;
    }
}

.addplus {
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 60px;
    transform: translate(-50%, -50%);
}

.avatar {
    height: 200px;
}
</style>